<%--
  Created by IntelliJ IDEA.
  User: 贾振鹏
  Date: 2021/5/30
  Time: 15:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>日志图表页面</title>
    <script type="text/javascript" src="${js}/jquery.js"></script>
    <script type="text/javascript" src="${js}/echarts.js"></script>

</head>
<body>
<%--
    要显示到的div块，注意：div必须有高和宽属性
 --%>
<div id="echartsPie" style="width: 800px; height: 600px;"></div>


<script type="text/javascript">
    //初始化加载
    var echartsPie = echarts.init(document.getElementById('echartsPie'));
    //使用ajax方式异步获取数据
    $.post("${root}/admin/sysconfig/logschart", function(datas) {
        console.log(datas);
        //定义数据初始变量
        var servicedata=[];
        //循环遍历，把后端响应数据，赋值到servicedata中
        for(var i=0;i<datas.length;i++){
            var obj=new Object();
            obj.name=datas[i].executeType;
            obj.value=datas[i].count;
            servicedata[i]=obj;

        }
        //设置样式，填充数据
        echartsPie.setOption({
            title : {
                text: '日志类型数据统计',
                subtext: '饼图',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} <br/>{c} : {d} %"      //a 系列名称，b 数据项名称，c 数值，d 百分比
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:datas.name
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'点击量',
                    type:'pie',
                    radius : '55%',//饼图的半径大小
                    center: ['50%', '60%'],//饼图的位置
                    data:servicedata
                }
            ]
        })
    })

</script>

</body>
</html>
